<template>
	<view class="other-payment">
		<view class="top-bar">
			<image class="course-cover" :src="topInfo.image"></image>
			<view class="course-info">
				<view class="course-title">{{ topInfo.title }}</view>
				<view class="course-subtitle" v-if="topInfo.info">{{ topInfo.info }}</view>
			</view>
			<view style="text-align: right;">
				<view class="course-price">¥{{ qrcodeInfo.cost}}</view>
				<view class="course-shop">{{ topInfo.shop_name}} </view>
			</view>
		</view>

		<view class="content-wrapper">
			<view class="qr-section">
				<view class="amount-section">
					<view class="amount-label">待支付金额</view>
					<view class="amount-value">¥{{ qrcodeInfo.cost}}</view>
				</view>
				<image class="qr-code" :src="formatQrUrl(qrcodeInfo.image)" v-if="qrcodeInfo.image" mode="widthFix"></image>
				<view class="qr-loading" v-else>加载支付二维码中...</view>

				<view class="payment-icons">
					<image src="/static/payment/wxzf@2x.png" class="icon"></image>
					<image src="/static/payment/zfb (2).png" class="icon"></image>
					<image src="/static/payment/ysf (2).png" class="icon"></image>
				</view>
				<view class="payment-desc">{{ qrcodeInfo.payment_str}}</view>
				<view class="payment-tip">{{ qrcodeInfo.notice }}</view>
			</view>
		</view>

		<view class="bottom-fixed">
			<view class="pay-tip">{{ explain}}</view>
			<view class="action-buttons">
				<button class="back-btn" @click="backToOrder">返回我的</button>
				<button class="paid-btn" @click="markAsPaid">已支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectPay
	} from '@/api/pay.js'
	export default {
		data() {
			return {
				orderNo: '',
				topInfo: {},
				qrcodeInfo: {},
				explain: ''
			}
		},
		onLoad(options) {
			// console.log('跳转携带的参数：', options)
			if (options.order_no) {
				this.orderNo = options.order_no
				this.getPaymentData()
			} else {
				uni.showToast({
					title: '订单号缺失',
					icon: 'none'
				})
				setTimeout(() => {
					this.backToOrder()
				}, 1500)
			}
		},
		methods: {
			getPaymentData() {
				uni.showLoading({
					title: '加载支付信息中...'
				})
				selectPay({
						order_no: this.orderNo
					})
					.then(({
						data: res
					}) => {
						uni.hideLoading()
						if (res.code === 1 && res.data) {
							this.topInfo = res.data.top_info
							this.qrcodeInfo = res.data.qrcode_info
							this.explain = res.data.explain
							if (!this.topInfo.image) {
								this.topInfo.image = '/static/stock/bg.png'
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
					.catch(err => {
						uni.hideLoading()
						console.error('支付接口请求失败：', err)
						uni.showToast({
							title: '网络异常，请重试',
							icon: 'none'
						})
					})
			},
			formatQrUrl(url) {
				if (!url) return ''
				return url.replace(/\\/g, '/')
			},
			backToOrder() {
				  uni.switchTab({
				        url: '/pages/user/index' 
				    });
			},
			markAsPaid() {
				// uni.showToast({
				// 	title: '支付成功',
				// 	icon: 'success'
				// })

				  uni.switchTab({
				        url: '/pages/user/index' 
				    });

			}
		}
	}
</script>

<style lang="scss">
	.qr-loading {
		width: 316rpx;
		height: 316rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 32rpx;
	}

	page {
		background: #e9e9e9;
		height: 100%;
	}

	.other-payment {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.top-bar {
		display: flex;
		margin-bottom: 16rpx;
		background: #fff;
		padding: 24rpx;
		width: 100%;
	}

	.top-bar .course-cover {
		width: 160rpx;
		height: 120rpx;
		background: rgba(0, 0, 0, 0.00);
		border-radius: 16rpx;
	}

	.top-bar .course-info {
		flex: 1;
		margin-left: 16rpx;
	}

	.top-bar .course-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.top-bar .course-subtitle {
		font-size: 24rpx;
		color: #666;
		margin-top: 14rpx;
	}

	.top-bar .course-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #f37364;
	}

	.top-bar .course-shop {
		font-size: 24rpx;
		color: #999;
		margin-top: 14rpx;
	}

	.content-wrapper {
		flex: 1;
		width: 100%;
		background: #e9e9e9;
	}

	.qr-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 24rpx;
		width: 100%;
		background: #ffffff;
	}

	.qr-section .qr-code {
		width: 316rpx;
		height: auto;
		margin-bottom: 32rpx;
		opacity: 0.77;
		background: rgba(0, 0, 0, 0.00);
	}

	.qr-section .payment-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0rpx 0 0 0;
	}

	.qr-section .payment-icons .icon {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		margin: 0 16rpx;
		width: 54rpx;
		height: 48rpx;
	}

	.qr-section .payment-desc {
		margin: 24rpx 0 8rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #000000;
	}

	.qr-section .payment-tip {
		opacity: 0.6;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #000000;
	}

	.amount-section {
		text-align: center;
	}

	.amount-section .amount-label {
		margin: 14rpx 0 0 0;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Heavy;
		font-weight: 800;
		text-align: center;
		color: #000000;
	}

	.amount-section .amount-value {
		font-size: 36rpx;
		font-family: DIN, DIN-Bold;
		font-weight: 700;
		text-align: center;
		color: #f37364;
		margin: 0 0 44rpx 0;
	}

	.bottom-fixed {
		background: #fff;
		padding: 24rpx 20rpx 56rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0rpx -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}

	.bottom-fixed .pay-tip {
		opacity: 0.6;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #000000;
		margin-bottom: 24rpx;
	}

	.bottom-fixed .action-buttons {
		display: flex;
		justify-content: space-around;
	}

	.bottom-fixed .action-buttons .back-btn,
	.bottom-fixed .action-buttons .paid-btn {
		width: 346rpx;
		height: 88rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #73f0ea;
	}

	.bottom-fixed .action-buttons .back-btn {
		border: 1rpx solid #73f0ea;
		color: #73f0ea;
	}

	.bottom-fixed .action-buttons .paid-btn {
		color: #fff;
		background: #73f0ea;
		margin-left: 18rpx;
	}
</style>